<template>
  <el-dialog
    v-if="modelValue.visible"
    v-model="modelValue.visible"
    title="设置排料规则应用范围"
    width="700px"
  >
    <div class="dialog-content">
      <!-- 顶部提示条 -->
      <div class="tip-bar">选择排料规则应用到不同的机型</div>

      <!-- 表单区域 -->
      <el-form :model="form" label-width="175px" label-position="right">
        <!-- 设置排料规则选择器 -->
        <el-form-item label="设置排料规则" required>
          <el-select
            v-model="form.ruleType"
            placeholder="设置排料规则"
            filterable
            clearable
            class="form-select"
          >
            <el-option
              v-for="item in ruleOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <!-- 选择应用的种类/产品线 -->
        <el-form-item label="选择应用的种类/产品线" required>
          <el-select
            v-model="form.productLine"
            placeholder="选择设备种类/产品线"
            filterable
            clearable
            class="form-select"
          >
            <el-option
              v-for="item in productLineOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <!-- 底部按钮 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="ensure">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'

// 控制对话框显示
const props = defineProps(['modelValue'])
const addEditRef = ref(null)

// 表单数据
const form = reactive({
  ruleType: '',
  productLine: '',
})

// 规则选项
const ruleOptions = [
  { value: 'rule1', label: '规则一' },
  { value: 'rule2', label: '规则二' },
  { value: 'rule3', label: '规则三' },
]

// 产品线选项
const productLineOptions = [
  { value: 'line1', label: '产品线一' },
  { value: 'line2', label: '产品线二' },
  { value: 'line3', label: '产品线三' },
]

const cancel = () => {
  props.modelValue.visible = false
}

const ensure = () => {
  props.modelValue.visible = false
}
</script>

<style scoped>
.dialog-content {
  padding: 0 12px;
}

.tip-bar {
  background-color: #fef4e1;
  color: #666;
  padding: 8px 12px;
  font-size: 14px;
  margin-bottom: 20px;
  border-radius: 4px;
}

.form-select {
  width: 100%;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style>
